<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var can, ctx;

window.onload = function(){
	var r = document.getElementById('rect');
	var fr = document.getElementById('fillRect');
	var ar = document.getElementById('alphaRect');
	var alpha = document.getElementById('rang');
	
	var ar2 = document.getElementById('boldRect');
	var alpha2 = document.getElementById('brang');
	
	can = document.getElementById('canvas');
	ctx = can.getContext('2d');
	
	r.onclick = function(){
		ctx.strokeStyle = 'rgb(255,0,0)';
		ctx.strokeRect(10,10,200,200);
	}
	
	fr.onclick = function(){
		ctx.strokeStyle = 'rgb(255,0,0)';
		ctx.fillStyle = 'rgb(255,200,200)';
		ctx.fillRect(10,10,200,200);
	}
	
	ar.onclick = fillR; 
	
	alpha.onchange = fillR;
	
	ar2.onclick = fillRd;
	alpha2.onchange = fillRd;
}

function fillR(){
	var v = document.getElementById('rang').value;
	ctx.clearRect(10, 230,420, 420);
	ctx.fillStyle = 'rgba(255,0,0,' + v + ')';
	ctx.fillRect(10,230,200,200);
	
	ctx.fillStyle = 'rgba(0,0,255,' + v + ')';
	ctx.fillRect(105,310,200,200);
}

function fillRd(){
	var v = document.getElementById('brang').value;
	ctx.clearRect(200, 200,500, 500);
	ctx.lineWidth = v;
	ctx.fillStyle = 'rgb(0,0,255)';
	ctx.strokeRect(200,200,200,200);

}

</script>
</head>
<body>

<canvas id="canvas" width="800px" height='700px'>
</canvas>
<p/>
<input type="button" value="사각형" id='rect'>
<input type="button" value="fillRect" id="fillRect">
<input type="button" value="alphaRect" id="alphaRect">
<input type="range" min="0" max="1" step=".1" id="rang">

<input type="button" value="굵은사각" id="boldRect">
<input type="range" min="0" max="1000" step="100" id="brang">
</body>
</html>